import React, { Component } from 'react';
import axios from 'axios';

class LunarDate extends Component {
    state = {
        input: false,
        date: "",
        year: 0,
        month: 0,
        day: 0,
        years: [],
        months: [],
        days: [],
    }
    inputLunar = () => {
        this.setState({
            input: true
        })
    }
    set_year = (e) => {
        this.setState({
            year: parseInt(e.target.value)
        })
    }
    set_month = (e) => {
        this.setState({
            month: parseInt(e.target.value)
        })
    }
    set_day = (e) => {
        this.setState({
            day: parseInt(e.target.value)
        })
    }
    submit = () => {
        axios.post("/flask/is_lunar", {
            "year": this.state.year,
            "month": this.state.month,
            "day": this.state.day,
        }).then((res) => {
            if("" !== res.data.error) {
                alert(res.data.error)
            } else {
                let date = this.state.year + "-" + this.state.month + "-" + this.state.day
                this.setState({
                    date: date,
                    input: false,
                })
                this.props.setLunar(this.state.year, this.state.month, this.state.day)
            }
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }
    clear = () => {
        this.setState({
            date: "",
            input: false,
        })
        this.props.setLunar(0, 0, 0)
    }
    getTodday = () => {
        axios.get("/flask/cur_lunar").then((res) => {
            if("" !== res.data.error) {
                console.log(res.data.error)
            } else {
                let date = res.data.today.year + "-" + res.data.today.month + "-" + res.data.today.day
                this.setState({
                    year: res.data.today.year,
                    month: res.data.today.month,
                    day: res.data.today.day,
                    date: date,
                })
                this.props.setLunar(this.state.year, this.state.month, this.state.day)
            }
        }).catch((err) => {
            console.log("请求服务器端时产生的错误信息: " + err)
        })
    }
    initSelect = () => {
        var year =[]
        for(let i = 1900; i <= 2100; i++) {
            year.push(i)
        }
        var month = []
        for(let i = 1; i <= 12; i++) {
            month.push(i)
        }
        var day = []
        for(let i = 1; i <= 30; i++) {
            day.push(i)
        }
        this.setState({
            years: year,
            months: month,
            days: day,
        })
    }
    componentDidMount () {
        this.initSelect()
        this.getTodday()
    }
    render(){
        const input = <input
            onClick={this.inputLunar}
            value={this.state.date}
            type="text" size="10" maxLength="10" readOnly ></input>
        let year = this.state.years.map(y => {
            return <option value={y} key={y}>{y}</option>
        })
        let month = this.state.months.map(m => {
            return <option value={m} key={m}>{m}</option>
        })
        let day = this.state.days.map(d => {
            return <option value={d} key={d}>{d}</option>
        })
        const select = <div>
            <select value={this.state.year} onChange={this.set_year}>{year}</select>
            <select value={this.state.month} onChange={this.set_month}>{month}</select>
            <select value={this.state.day} onChange={this.set_day}>{day}</select>
            <button onClick={this.submit}>确定</button>
            <button onClick={this.clear}>清除</button>
        </div>
        const date = this.state.input ? select : input
        return (
            <div>{date}</div>
        )
    }
}

export default LunarDate;
